<template>
  <div>
    <div class="department">
      <div class="header">
        部门管理
        <el-button
          circle
          size="mini"
          icon="el-icon-plus"
          @click="printer()"
          style="background: #dce8ff; border:0px; margin:0px;"
        ></el-button>
        <el-button
          circle
          size="mini"
          icon="el-icon-edit"
          @click="printer()"
          style="background: #dce8ff; border:0px;margin:0px;"
        ></el-button>
        <el-button
          circle
          size="mini"
          icon="el-icon-minus"
          @click="printer()"
          style="background: #dce8ff; border:0px;margin:0px;"
        ></el-button>
      </div>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="box">
      <div class="printButton">
        <el-button size="small" icon="el-icon-download" @click="printer()"
          >下载导入模板</el-button
        >
      </div>
      <div class="searchLine">
        <div class="staffName">
          姓名：
          <el-input
            v-model="inputName"
            class="nameBox"
            size="mini"
            clearable
          ></el-input>
        </div>
        <div class="staffId">
          身份证号：
          <el-input
            v-model="inputId"
            class="inputBox"
            size="mini"
            clearable
          ></el-input>
        </div>
        <div class="staffSex">
          性别：
          <el-select v-model="inputSex" class="sexBox" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="staffStatus">
          状态：
          <el-select v-model="inputStatus" class="typeBox" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="staffAttribute">
          员工属性：
          <el-select v-model="inputAttribute" class="typeBox" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-button
          size="small"
          icon="el-icon-search"
          style="height:30px"
          @click="printer()"
          >搜索</el-button
        >
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          :cell-style="{ padding: '8px 0' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40"> </el-table-column>
          <el-table-column label="姓名" width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.trainName }}</template>
          </el-table-column>
          <el-table-column prop="trainStart" label="员工属性" width="110">
          </el-table-column>
          <el-table-column prop="trainEnd" label="身份证号" width="110">
          </el-table-column>
          <el-table-column prop="trainType" label="性别" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="trainLocation"
            label="联系电话"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainer"
            label="所属部门"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainerDepartment"
            label="工作岗位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainerNum"
            label="入职时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainingContent"
            label="职务"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainingContent"
            label="状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="trainingContent"
            label="登录权限"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="pageChange">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StaffInfo",
  data() {
    return {
      inputName: "",
      inputId: "",
      inputSex: "全部",
      inputStatus: "全部",
      inputAttribute: "全部",
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      options: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        },
        {
          value: "全部",
          label: "全部"
        }
      ],
      tableData: [
        {
          trainName: "培训xx",
          trainStart: "2016-05-03",
          trainEnd: "2016-05-04",
          trainType: "培训1",
          trainLocation: "上海市普陀区金沙江路 1518 弄",
          trainer: "小明",
          trainerDepartment: "部分1",
          trainerNum: 10,
          trainingContent: "哈哈"
        },
        {
          trainName: "培训xx",
          trainStart: "2016-05-03",
          trainEnd: "2016-05-04",
          trainType: "培训1",
          trainLocation: "上海市普陀区金沙江路 1518 弄",
          trainer: "小明",
          trainerDepartment: "部分1",
          trainerNum: 10,
          trainingContent: "哈哈"
        },
        {
          trainName: "培训xx",
          trainStart: "2016-05-03",
          trainEnd: "2016-05-04",
          trainType: "培训1",
          trainLocation: "上海市普陀区金沙江路 1518 弄",
          trainer: "小明",
          trainerDepartment: "部分1",
          trainerNum: 10,
          trainingContent: "哈哈"
        }
      ],
      multipleSelection: [],
      currentPage: 1
    };
  },
  methods: {
    printer() {
      console.log(
        this.inputName,
        this.inputType,
        this.inputStart,
        this.inputEnd
      );
    },
    handleNodeClick(data) {
      console.log(data);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.box {
  background: #eeeff1;
  border: 0.5px solid;
  border-color: rgba(0, 0, 0, 0.3);
  width: 1030px;
  height: 500px;
  position: absolute;
  left: 480px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.printButton {
  margin: 10px;
}
.searchLine {
  margin-left: 10px;
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
.nameBox {
  width: 80px;
}
.inputBox {
  width: 150px;
}
.typeBox {
  width: 110px;
}
.sexBox {
  width: 100px;
}
.table {
  margin-top: 10px;
  width: 100%;
}
.pageChange {
  position: absolute;
  bottom: 20px;
  margin-left: 10px;
}
.department {
  position: absolute;
  left: 280px;
  margin-top: 10px;
  width: 180px;
  height: 500px;
  background: #ffffff;
  border: 0.5px solid;
  border-color: rgba(0, 0, 0, 0.3);
}
.header {
  line-height: 30px;
  border-bottom: 0.5px solid;
  border-color: rgba(0, 0, 0, 0.3);
  background: #dce8ff;
  display: flex;
  padding-left: 10px;
  padding-right: 5px;
}
</style>
